<!--
 * @Description: 组件
 * @Author: admin
 * @Date: 2021-06-10 10:27:27
 * @LastEditors: admin
 * @LastEditTime: 2021-06-10 10:36:57
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件</title>
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>
<script type="text/babel">
  // 函数组件
  // function Welcome(props){
  //     return <h1>Hello,{props.name}</h1>
  //   }
  // class
  class Welcome extends React.Component{
    render(){
      return <h1>Hello,{this.props.name}</h1>
    }
  }
  // 渲染组件
  const element = (
      <div>
        <Welcome name="zhangsan"/>  
        <Welcome name="lisi"/>  
        <Welcome name="wangwu"/>  
      </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  )

</script>

</html>